<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :md="24" :lg="24">
        <!-- search -->
        <el-form inline :model="formInline" class="demo-form-inline">
          <!-- 站台名称 -->
          <el-form-item label="站台名称:">
            <el-input
              v-model="formInline.stationName"
              size="small"
              placeholder="请输入站台名称"
            ></el-input>
          </el-form-item>
          <!-- 线路名称 -->
          <el-form-item label="线路名称:">
            <el-input
              v-model="formInline.lineName"
              size="small"
              placeholder="请输入线路名称"
            ></el-input>
          </el-form-item>
          <!-- 设备id号 -->
          <el-form-item label="设备id号:">
            <el-input
              v-model="formInline.deviceId"
              size="small"
              placeholder="请输入设备id号"
            ></el-input>
          </el-form-item>
          <!-- 设备名称 -->
          <el-form-item label="设备名称:">
            <el-input
              v-model="formInline.deviceName"
              size="small"
              placeholder="请输入设备名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- button -->
        <div>
          <el-row>
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="addCard"
              >新增</el-button
            >
            <el-button type="warning" plain icon="el-icon-download" size="mini"
              >导出</el-button
            >
            <el-button type="primary" icon="el-icon-search" size="mini"
              >搜索</el-button
            >
          </el-row>
        </div>

        <!-- table -->

        <div class="cardTable">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="设备号" width="120" align="center">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              prop="deciveName"
              label="设备名称"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="stationNumber"
              label="站台序号"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="stationName"
              label="站台名称"
              width="80"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="lineNumber"
              label="线路序号"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="lineName"
              label="线路名称"
              width="90"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip align="center">
              <!-- 修改 -->
              <el-tooltip
                effect="dark"
                content="修改"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  plain
                ></el-button>
              </el-tooltip>
              <!-- 删除 -->
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  plain
                ></el-button>
              </el-tooltip>
              <!-- 详情 -->
              <el-tooltip
                effect="dark"
                content="详情"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="success"
                  size="mini"
                  icon="el-icon-info"
                  plain
                  @click="getTableInfo = true"
                ></el-button>
              </el-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!-- Dialog table-->
    <el-dialog title="站台详情信息" :visible.sync="getTableInfo" width="90%">
      <el-table :data="gridData" border>
        <el-table-column label="站台序号" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          prop="deciveName"
          label="站台名称"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="stationNumber"
          label="线路序号"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="stationName"
          label="线路名称"
          width="80"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="lineNumber"
          label="线路类型"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="lineName"
          label="站台序号"
          width="90"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formInline: {
        // 绑定表单的数据
        stationName: '',
        lineName: '',
        deviceId: '',
        deviceName: ''
      },
      tableData: [
        {
          date: '210402Tc8888',
          deciveName: '30路东大门',
          stationNumber: '12345',
          stationName: '东大门',
          lineNumber: '67890',
          lineName: '30路'
        },
        {
          date: '210402Tc8888',
          deciveName: '30路东大门',
          stationNumber: '12345',
          stationName: '东大门',
          lineNumber: '67890',
          lineName: '30路'
        }
      ], // 表格的数据
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ], // 详情表格Dialog对话框的数据
      getTableInfo: false
    }
  },
  methods: {
    handleSelectionChange () {},
    //新增跳转到站台配置
    addCard () {
      this.$router.push('/stations/stationConfig')
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-form-inline {
  display: flex;
}
.cardTable {
  padding-top: 20px;
}
</style>
